<template>
    <div class="repaymentDetailsPage">
        <div class="search-wrap d-flex j-end">
            <div class="search-buttons m-l50 d-flex a-center">
              <el-button
                    class="button_edit"
                    @click="onExport"
            >
                <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                一键导出
            </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                radio
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
        ></public-table>
    </div>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import PublicTable from "@/components/PublicTable.vue";
import {tableCommonFun} from "@/hooks/tableCommon";
import {useRouter} from "vue-router";

const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'bankManagementApi.getCompanyRepayment',
});
const exportConfig = reactive({
    fileName:'businessFinance',
    apiPath:'exportApi.getCompanyRepaymentLeadingOut',
    tableName:'还款明细表'
});
const {
    form,
    page,
    tableOption,
    tableData,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig);

form.value = {
    id:''
}

tableOption.value = [
    { label: "债权方 ", prop: "creditor" },
    { label: "债务方", prop: "debtor" },
    { label: "利率", prop: "interestRate" },
    { label: "还款时间", prop: "repaymentTime" },
    { label: "借款金额", prop: "loanAmount" },
    { label: "还款金额", prop: "repaymentAmount" },
];

// 从路由path中获取的
const router = useRouter();
const id = router.currentRoute.value.params.id;

onMounted(()=>{
    form.value.id = id;
    getData({
        pageNum:1,
        pageSize:10,
        param:id
    });
});
</script>

<style lang="scss" scoped>
.repaymentDetailsPage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
